export default // 定义食物类Food
    class Food {
    // 定义一个属性表示食物所对应的元素节点
    element: HTMLElement;
    constructor() {
        // 获取页面中的food元素并将其直接赋值给element
        // 后面的 ！ 表示获取的元素不可能为空，变量赋值就不会报可能为空的错误
        this.element = document.getElementById("food")!;
    }

    // 定义获取食物X轴与Y轴的方法
    get X() {
        return this.element.offsetLeft;
    }
    get Y() {
        return this.element.offsetTop;
    }

    // 改变食物的位置
    change() {
        /* 
            食物的位置，最小是0，最大是宽度或者高度减去盒子的宽度和高度
            最大的left 300 - 10  最大的高度 300 - 10
            食物的坐标必须是可以整除10的
            蛇移动一次就是一格，一格就是10px
         */
        // this.element.style.left = "80px";
        // this.element.style.left = "100px";

        // Math.round 四舍五入取整    Math.random [0-1) 之间的随机数
        let left = Math.round(Math.random() * 29) * 10;
        let top = Math.round(Math.random() * 29) * 10;
        this.element.style.left = left + 'px';
        this.element.style.top = top + 'px';

    }

}

/* // 测试food代码
const food = new Food();
console.log(food.X, food.Y);
food.change();
console.log(food.X, food.Y); */
